<template>
  <div class="list">
    <vxe-grid ref="grid" class="grid_box" v-bind="gridOptions" v-on="$attr">
      <template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
        <slot :name="name" v-bind="scope" />
      </template>
    </vxe-grid>
    <div class="list_footer"><slot name="listfooter"></slot></div>
  </div>
</template>
<script lang="ts" setup>
  import {computed, onMounted, useAttrs, reactive, ref} from 'vue'
  import {VxeGridInstance, VxeGridProps} from 'vxe-table'
  import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'

  const grid = ref<VxeGridInstance>()
  const props = defineProps({
    config: {
      type: Object,
      default: () => {}
    }
  })
  let $attr = useAttrs()

  const gridOptions = reactive<VxeGridProps>({
    height: 'auto',
    showOverflow: true,
    rowConfig: {
      height: 60,
      isHover: true
    },
    pagerConfig: pagerConfig,
    // proxyConfig: {
    // 	props: proxyConfigProps,
    // 	ajax: {
    // 		async query({ page: { currentPage: current, pageSize: size } }) {
    // 			const { query, API } = props.config

    // 			return await API({ ...query, current, size })
    // 		}
    // 	}
    // },
    ...props.config
  })

  // 刷新数据
  const getPage = (page?: any) => {
    grid.value?.commitProxy(page === 1 ? 'reload' : 'query')
  }
  // 获取数据
  const getData = () => {
    return grid.value?.getData()
  }
  // 获取当前数据
  const getTableData = () => {
    return grid.value?.getTableData()
  }
  // 更新数据
  let updateGrid = list => {
    grid.value?.reloadData(list)
  }
  // 设置高亮行
  let setCurrentRow = data => {
    grid.value?.setCurrentRow(data)
  }
 
  defineExpose({
    fetch: getPage,
    getData,
    updateGrid,
    getTableData,
    setCurrentRow
  })
</script>
<style lang="less" scoped>
  .list {
    height: 100%;
    position: relative;
  }
  .grid_box {
    padding: 20px;
  }

  :deep(.vxe-grid--toolbar-wrapper) {
    border: none;

    padding: 8px 12px 10px 0;

    .vxe-toolbar {
      padding: 0;
    }
  }
  .list_footer {
    position: absolute;
    bottom: 18px;
    left: 21px;
  }
</style>
